::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar:horizontal {
  height: 6px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(0, 0, 0, 0.1);
}

.home-wrapper {
  height: 100%;
  position: relative;

  .date-row {
    width: 100%;
    display: flex;
    margin-bottom: 10px;

    .data-col {
      flex: 1;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }

      .home_top_box {
        width: 100%;
        height: 100px;
        position: relative;
        cursor: pointer;
      }

      .home_top_box>div {
        height: 100%;
        padding: 0 25px;
        padding-top: 22px;
        text-align: right;
        position: relative;
        overflow: hidden;
      }

      .home_top_box i {
        font-size: 40px;
        position: absolute;
        left: 25px;
        top: 26px;
      }

      .home_top_box h3 {
        font-size: 14px;
        margin-bottom: 5px;
      }

      .home_top_box span {
        line-height: 22px;
        font-size: 24px;
      }

      .home_top_box .home_top_bot {
        width: 100%;
        height: 400px;
        padding: 5px;
        position: absolute;
        top: 90px;
        left: 0;
        z-index: 999;
        display: none;
      }

      .home_top_box .home_top_bot .bot_box {
        height: 100%;
        border: 1px solid #ccc;
        background: #eef2f9;
      }

      .home_top_box>div {
        color: #fff;
      }

      .home_top_box i {
        color: rgba(255, 255, 255, 0.4);
      }

      .home_top_box .devleng {
        background: #1E9FFF;
      }

      .home_top_box .devon {
        background: #47a96c;
      }

      .home_top_box .devalarm {
        background: #FF5722;
      }

      .home_top_box .devoff {
        background: #393D49;
      }

      .home_top_box i {
        font-size: 40px;
        position: absolute;
        left: 25px;
        top: 26px;
      }
    }
  }

  .map {
    position: relative;
    top: 0;
    transition: 0.5s;
  }

  .sb_box {
    position: absolute;
    right: 0;
    top: 0;
  }

  .map_big {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100% !important;
    z-index: 9;
    margin-top: 0 !important;
    box-sizing: border-box;
    .el-card {
      height: 100% !important;
      .el-card__body{
        height: 100% !important;
      }
    }

    .list_item {
      width: 100%;
      height: 100% !important;
    }
    .map_box{
      height: calc(100% - 30px) !important;

    }
  }

  .list_item {
    height: 380px;

    .scroll_box {
      width: 100%;
      height: 350px;
      overflow: scroll;
    }
    .map_box{
      height: 350px;
      width: 100%;
      .info_list{
        padding-left: 10px;
        margin-top: 10px;
        span{
          font-weight: 600;
          margin-right: 8px;
        }
      }
    }

    .title {
      width: 100%;
      position: relative;
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid #eee;
      padding: 0 10px;
      box-sizing: border-box;

      .openbig {
        position: absolute;
        right: 10px;
        top: 0px;
        cursor: pointer;
        font-size: 16px;
      }
    }
  }

  .date-box {
    height: calc(100% - 112px);
    margin-bottom: 10px;
  }

  .list_box {
    height: calc(100% - 400px);
    padding: 0 10px;
    margin-top: 392px;
    transition: 0.5s;
    .yz_box{
      width: 100%;
      height: calc(100% - 30px);
      overflow-y: scroll;
      margin-top: 10px;
      padding-left: 10px;
      box-sizing: border-box;
      .yz_item{
        width: calc(16.6% - 12px);
        height: 80px;
        overflow: hidden;
        float: left;
        margin: 0 10px 10px 0;
        user-select: none;
        position: relative;
        background: #f8f8f8;
        border: 1px solid #ddd;
        .yz_img{
          float: left;
          width: 50px;
          float: left;
          background: rgb(71, 169, 108);
          height: 100%;
          img{
            width: 30px;
            height: 30px;
            margin: 25px 10px 0 10px;
          }
        }
        .yz_txt{
          width: calc(100% - 50px);
          float: left;
          height: 80px;
          text-align: center;
          font-size: 14px;
          padding-top: 20px;
          .yz_title{
            color: #000;
            font-weight: 600;
            margin-bottom: 4px;
          }
          .yz_desc{
            color: rgb(4, 170, 41);
            font-weight: 600;

          }
        }
        i{
         
          font-size: 16px;
          color: #333;
        }
      }
      @media screen and (max-width: 1400px){
        .yz_item {
          width: calc(33% - 10px);
      }
      }
     
    }

    .el-col {
      height: 100%;
    }

    .el-card {
      height: 100%;
    }
  }

  .data-desc {
    width: 100%;
    height: 320px;
  }

  .data-chart {
    width: 100%;
    height: 400px;
  }

  .data-lang-box {
    padding: 10px 25px;
    box-sizing: border-box;

    .data-lang-title {
      line-height: 32px;
      font-size: 16px;
      text-align: center;
      margin-bottom: 10px;
    }

    .data-lang-item {
      height: 48px;
      line-height: 20px;
    }
  }
}